<template>
	<div class="pager-container">
		<div class="pager-num">
			<ul>
				<li @click="changeCurrentPage(1)">
					<md-button class="md-icon-button">
						<i class="iconfont iconGroup-1" style="font-size:20px;font-weight:bold;"></i>
					</md-button>
				</li>
				<li @click="changeCurrentPage(page-1)">
					<md-button class="md-icon-button">
						<i class="iconfont iconleft"></i>
					</md-button>
				</li>
				<li @click="changeCurrentPage(1)">
					<md-button :class="['md-icon-button',page==1?'md-accent':'']">1</md-button>
				</li>
				<li @click="changeCurrentPage(2)" v-if="num>=2">
					<md-button :class="['md-icon-button',page==2?'md-accent':'']">2</md-button>
				</li>

				<li @click="changeCurrentPage(3)" v-if="num>=3">
					<md-button :class="['md-icon-button',page==3?'md-accent':'']">3</md-button>
				</li>

                <li v-if="page>4&&num>4">
					<md-button class="md-icon-button">
						<i class="iconfont iconmore" ></i>
					</md-button>
				</li>
                <li v-if="page>=4&&page<=num-1&&num>=4">
					<md-button class="md-icon-button md-accent">{{page}}</md-button>
				</li>

                <li v-if="num>4&&page<num-1">
					<md-button class="md-icon-button">
						<i class="iconfont iconmore" ></i>
					</md-button>
				</li>

                <li @click="changeCurrentPage(num)" v-if="num>=4">
					<md-button :class="['md-icon-button',page==num?'md-accent':'']">{{num}}</md-button>
				</li>

				<li @click="changeCurrentPage(page+1)">
					<md-button class="md-icon-button">
						<i class="iconfont iconright"></i>
					</md-button>
				</li>
				<li @click="changeCurrentPage(num)">
					<md-button class="md-icon-button">
						<i class="iconfont iconGroup-" style="font-size:20px;font-weight:bold;"></i>
					</md-button>
				</li>
			</ul>
		</div>
		<div class="pager-op">
			<span>
				<md-field style="margin:0;width:80px;">
					<label>{{getLangText(label.current)}}</label>
					<md-input v-model="page"></md-input>
				</md-field>
			</span>
			<span>
				<md-field style="margin:0;width:80px;">
					<label>{{getLangText(label.limit)}}</label>
					<md-select v-model="size" @md-selected="changeLimit">
						<md-option v-for="item in limits" :value="item" :key="item">{{item}}</md-option>
					</md-select>
				</md-field>
			</span>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Pager",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			total: {
				type: Number,
				default: 1
			},
			limit: {
				type: Number,
				default: 10
			},
			current: {
				type: Number,
				default: 1
			},
			limitOp: {
				type: Array,
				default: function() {
					return [10, 25, 50, 100];
				}
			}
		},
		data: () => ({
			label: {
				current: { zh: "当前页", en: "current" },
				limit: { zh: "每页数量", en: "rows/page" }
			},
            limits:[],
			size: 10,
			num: 1,
			page: 1,
			showNum: [1]
		}),
		watch: {
			total() {
				this.num = this.total;
			},
			limit() {
				this.size = this.limit;
			},
			current() {
				this.page = this.current;
            },
            limitOp(){
                this.limits=this.limitOp;
                this.checkLimit();
            }
		},
		methods: {
			changeCurrentPage(idx) {
				if (idx < 1) {
					idx = 1;
                } 
                if (idx > this.num) {
					idx = this.num;
				}
				if(idx!=this.page){
				this.page = idx;
				this.$emit("pager-current", this.page);
				}
				
			},
			changeLimit(limit) {
				this.size = limit;
				this.page = 1;
				this.$emit("pager-limit", this.size);
            },
            checkLimit(){
                var tag=true;
                for(var i =0;i<this.limits.length;i++){
                    if(this.size==this.limits[i]){
                        tag=false;
                        break;
                    }
                }
                if(tag){
                    this.limits.push(this.size);
                    this.limits=this.limits.sort(function(a,b){return a-b;});
                }
            }
		},
		mounted() {
			this.num = this.total;
			this.size = this.limit;
            this.page = this.current;
            this.limits=this.limitOp;
            this.checkLimit();
		}
	};
</script>

